<template>
  <div class="DSL-exhandling">
    <div class="content-box">
      <!--
      <div class="content-top">
        <ul class="ul-class">
          <template>
            <li class="li-class" @click="initializeRequest()">
              <img src="@/assets/public/监测正常.png" alt />
              <div class="li-center__box">
                <p class="p1">全部设备</p>
              </div>
              <span>{{total}}</span>
            </li>
            <li class="li-class" @click="initializeRequest('N')">
              <img src="@/assets/public/监测正常.png" alt />
              <div class="li-center__box">
                <p class="p1">正常设备</p>
              </div>
              <span>24</span>
            </li>
            <li class="li-class" @click="initializeRequest('F')">
              <img src="@/assets/public/监测异常.png" alt />
              <div class="li-center__box">
                <p class="p1">停运设备</p>
              </div>
              <span>24</span>
            </li>
            <li class="li-class" @click="initializeRequest('B')">
              <img src="@/assets/public/监测异常.png" alt />
              <div class="li-center__box">
                <p class="p1">异常设备</p>
              </div>
              <span>24</span>
            </li>
            <li class="li-class" @click="initializeRequest('D')">
              <img src="@/assets/public/监测报警.png" alt />
              <div class="li-center__box">
                <p class="p1">故障设备</p>
              </div>
              <span>24</span>
            </li>
          </template>
        </ul>
      </div>
      -->
      <div class="content-center">
        <template v-for="(item, index) in dataType">
          <div class="list-box" :key="index" @click="showModal(item)">
            <img src="@/assets/设备图.png" alt />
            <div class="list-box__right">
              <div class="right-name">
                <img src="@/assets/public/监测报警小.png" alt />
                <span>{{ item.monitorName }}</span>
              </div>

              <div class="address-box">
                <p>MN号:{{ item.equipmentSequence }}</p>
              </div>

              <div class="address-box">
                <span>公司:{{ item.companyName }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>

      <div class="content-bottom1 clearfix">
        <div class="page-box">
          <a-pagination
            :show-total="(total) => `共 ${total} 件设备`"
            v-model="data.current"
            :total="total"
            :defaultPageSize="data.size"
            :item-render="itemRender"
            @change="pagechangeFn"
          />
        </div>
      </div>
      <!-- 模态框 -->
      <div>
        <a-modal
          v-model="visible"
          centered
          :title="title"
          @ok="handleOk"
          width="80%"
          :footer="null"
        >
          <!--<div class="modalTop">
            <div class="imgPro">
              <img src="@/assets/设备图.png" alt />
            </div>
            <div class="modalLeft">
              <a-form
                :label-col="{ span: 8}"
                :wrapper-col="{span:16}"
                layout="horizontal"
                :colon="false"
              >
                <a-row type="flex" justify="start">
                  <a-col :span="7">
                    <a-form-item label="站点名称">
                      <a-input
                        class="inline-input"
                        autocomplete="off"
                        v-model="modalCurrent.monitorName"
                        disabled
                      ></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="企业名称">
                      <a-input class="inline-input" autocomplete="off" disabled v-model="modalCurrent.companyName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="异常时间">
                      <a-input
                        class="inline-input"
                        autocomplete="off"
                        v-model="modalCurrent.createTime"
                        disabled
                      ></a-input>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                 <a-col :span="7">
                    <a-form-item label="设备MN号">
                      <a-input
                        class="inline-input"
                        autocomplete="off"
                        disabled
                        v-model="modalCurrent.equipmentSequence"
                      ></a-input>
                    </a-form-item>
                  </a-col>
                   <a-col :span="6">
                    <a-form-item label="设备高度">
                      <a-input
                        class="inline-input"
                        autocomplete="off"
                        v-model="modalCurrent.height"
                        disabled
                      ></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="生产厂商">
                      <a-input
                        class="inline-input"
                        autocomplete="off"
                        disabled
                        v-model="modalCurrent.createFactory"
                      ></a-input>
                    </a-form-item>
                  </a-col>
                </a-row>
                 <a-row>
                  <a-col style="margin-left:15px">
                    <a-form-item label="备注" :label-col="{span: 2}" :wrapper-col="{span:10}">
                      <a-textarea placeholder :rows="3" disabled v-model="modalCurrent.note" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>-->

          <div class="modalFooter">
            <div class="tableclass">
              <a-table
                :data-source="modalNeed"
                :pagination="false"
                :columns="columns"
                :rowKey="(record) => record.id"
                style="height: 400px"
              >
                <template slot="operation" slot-scope="text, data">
                  <div class="editable-row-operations">
                    <span>
                      <a class="del-btn" @click="showModals(data)">异常处理</a>
                    </span>
                  </div>
                </template>
                <span
                  slot="equipmentName"
                  slot-scope="text, record"
                  class="equipmentName"
                  :title="record.equipmentName"
                  >{{ record.equipmentName }}</span
                >
              </a-table>
              <div class="content-bottom clearfix modal">
                <div class="page-box1">
                  <a-pagination
                    :show-total="(total) => `共 ${totalModal} 条记录`"
                    v-model="modalList.current"
                    :total="totalModal"
                    :defaultPageSize="modalList.size"
                    :item-render="itemRender"
                    @change="pagechangeFns"
                  />
                </div>
              </div>
              <a-modal
                title="异常处理"
                v-model="visibles"
                centered
                :maskClosable="false"
                :closable="false"
              >
                <!--ref="ruleForm"
                :rules="ruleForm"-->
                <a-form-model
                  :colon="false"
                  :labelCol="{ span: 5 }"
                  :wrapper-col="{ span: 17 }"
                  style="margin: 10px 0"
                  :model="handle"
                >
                  <a-row style="display: flex; align-items: center">
                    <a-col style="width: 100%">
                      <a-form-model-item
                        label="异常类型"
                        class="from-item__class"
                        :labelCol="{ span: 7 }"
                        :wrapper-col="{ span: 10 }"
                        prop="isEquipmentFault"
                      >
                        <a-select v-model="handle.isEquipmentFault" allow-clear>
                          <a-select-option value="no">无故障</a-select-option>
                          <a-select-option value="yes"
                            >设备故障</a-select-option
                          >
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item
                        label="故障类型"
                        class="from-item__class"
                        :labelCol="{ span: 7 }"
                        :wrapper-col="{ span: 10 }"
                        v-if="handle.isEquipmentFault == 'yes'"
                        prop="faultId"
                      >
                        <a-select v-model="handle.faultId" allow-clear>
                          <a-select-option
                            :value="item.id"
                            v-for="(item, index) in faultList"
                            :key="index"
                            >{{ item.name }}</a-select-option
                          >
                        </a-select>
                      </a-form-model-item>
                      <a-form-item
                        class="form-item"
                        label="处理日期"
                        :colon="false"
                        :labelCol="{ span: 7 }"
                        :wrapper-col="{ span: 10 }"
                      >
                        <a-date-picker
                          @change="onChanges"
                          valueFormat="YYYY-MM-DD"
                          format="YYYY-MM-DD"
                          :default-value="moment()"
                        />
                      </a-form-item>
                      <a-form-model-item
                        label="故障描述"
                        class="from-item__class"
                        :labelCol="{ span: 7 }"
                        :wrapper-col="{ span: 15 }"
                      >
                        <a-textarea
                          :rows="3"
                          v-model="handle.note"
                        ></a-textarea>
                      </a-form-model-item>
                      <a-form-model-item
                        label="上传图片"
                        class="from-item__class"
                        :labelCol="{ span: 7 }"
                        :wrapper-col="{ span: 10 }"
                      >
                        <a-upload
                          :file-list="fileList"
                          :remove="handleRemove"
                          :before-upload="beforeUpload"
                          multiple
                        >
                          <a-button> <a-icon type="upload" />上传 </a-button>
                        </a-upload>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </a-form-model>
                <template slot="footer">
                  <a-button class="btn" type="primary" @click="changeOk"
                    >确认</a-button
                  >
                  <a-button class="btn" type="info" @click="cancelBtn"
                    >取消</a-button
                  >
                </template>
              </a-modal>
            </div>
          </div>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "exhandling",
  data() {
    return {
      data: {
        current: 1,
        size: 16,
      },
      moment,
      title: "",
      //异常设备请求参数
      formData: {
        equipmentTypeId: "",
        status: "B",
        equipmentName: "",
      },
      total: 0, //全部设备
      dataType: [], //设备分类列表
      dataList: {},
      arr: [1, 1, 1, 2, 3],
      statusCount: {}, //请求列表状态和总数
      //模态框数据属性
      visible: false,
      //异常处理模态框
      visibles: false,
      faultList: [], //下拉列表
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          width: "10%",
          align: "center",
          ellipsis: true,
          customRender: (text, record, index) =>
            `${(this.modalList.current - 1) * this.modalList.size + index + 1}`,
        },
        // {
        //   title: "设备名称",
        //   dataIndex: "equipmentName",
        //   align: "center",
        //   scopedSlots: { customRender: "equipmentName" },
        // },
        {
          title: "异常项",
          dataIndex: "warningName",
          align: "center",
        },
        {
          title: "异常时间",
          dataIndex: "createTime",
          align: "center",
        },
        {
          title: "异常值",
          dataIndex: "rtd",
          align: "center",
        },
        {
          title: "正常值",
          dataIndex: "minValue",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" },
        },
      ],
      datas: [],
      modalList: {
        //请求参数
        beginTime: "",
        endTime: "",
        equipmentTypeId: "",
        status: 0,
        sampleType: "",
        equipmentName: "",
        current: 1,
        size: 10,
        mn: "",
      },
      modalNeed: [], //表格记录列表
      totalModal: 0,
      detailList: [], //详情包括最大最小值
      modalDeatil: [],
      equipmentSequence: "",
      modalCurrent: "", //模态框绑定数据
      // 上传图片
      fileList: [],
      uploading: false,
      //异常处理上报参数
      handle: {
        faultId: "3", //故障类型选中
        isEquipmentFault: "no", //异常类型
        mn: "",
        note: "", //描述
        id: "",
        status: 1, //状态
        createTime: "",
        handleBy: "", //当前用户id
        handleResult: "已处理",
      },
      // 添加设备表单验证
      ruleForm: {
        faultId: [
          {
            required: true,
            message: "故障类型必填",
            trigger: "change",
          },
        ],
        isEquipmentFault: [
          {
            required: true,
            message: "异常类型必填",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    //模态框
    showModal(item) {
      this.visible = true;
      //this.wariningMN(item);
      this.modalDeatil = item;
      this.modalList.mn = item.equipmentSequence;
      this.modalCurrent = item;
      this.title = `异常处理表 ${this.modalCurrent.companyName} ${this.modalCurrent.monitorName}`;
      this.modalCurrent.createTime = moment(
        this.modalCurrent.createTime
      ).format("YYYY-MM-DD");
      this.modalList.equipmentName = item.equipmentName;
      this.modalList.current = 1;

      this.break();

    },
    handleOk() {},
    //异常处理模态框
    showModals(data) {
      this.visibles = true;
      this.handle.mn = data.mn;
      this.handle.id = data.id;
      this.handle.handleBy = this.$user.id;
      console.log(this.$user);
      this.$api.GetFaultType().then((res) => {
        console.log(res);
        this.faultList = res.data.data;
      });
    },
    //获取当前Mn号
    // wariningMN(item) {
    //   this.equipmentSequence = item.equipmentSequence;
    //   //this.modalList.warningRecord.mn = this.equipmentSequence;
    //   this.modalList.equipmentName = item.equipmentName
    //   console.log(this.equipmentSequence);
    //   this.break();
    // },
    //弹窗表格记录列表
    break() {
      console.log(this.modalList);
      this.$api.PostwarningRecords(this.modalList).then((res) => {
        this.modalNeed = res.data.data;
        this.totalModal = res.data.total;
        this.modalNeed.forEach((v) => {
          v.createTime = moment(v.createTime).format("YYYY-MM-DD hh:mm:ss");
          v.minValue = v.minValue + "-" + v.maxValue;
        });
      });
    },
    //时间
    onChanges(date, dateString) {
      console.log(date, dateString);
      this.handle.createTime = moment(dateString).valueOf();
    },
    changeOk() {
      if (this.handle.createTime == "") {
        this.handle.createTime = moment().valueOf();
      }
      // if (this.handle.isEquipmentFault == "yes") {
      //   this.handle.isEquipmentFault = true;
      // } else {
      //   this.handle.isEquipmentFault = false;
      // }
      console.log(this.handle);
      // this.$api.PostHandle(formData).then((res) => {
      //   if (res.data.code == 0) {
      //     this.$message.success("异常处理成功");
      //     this.visibles = false;
      //   } else {
      //     this.$message.error(res.data.errorMessage);
      //   }
      // });
      // this.handle = {
      //   faultId: "", //故障类型选中
      //   isEquipmentFault: "no", //异常类型
      //   mn: "",
      //   note: "", //描述
      // };
      // if(this.handle.isEquipmentFault == undefined || this.handle.faultId == undefined){
      //   this.handle.isEquipmentFault = "",
      //   this.handle.faultId = ""
      // }
      // this.$refs.ruleForm.validate((valid) => {
      // if (valid) {
      if (this.handle.isEquipmentFault == "yes") {
        this.handle.isEquipmentFault = true;
      } else if(this.handle.isEquipmentFault == "no") {
        this.handle.isEquipmentFault = false;
        this.handle.faultId = '';
      }
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach((file, index) => {
        formData.append("files[" + index + "]", file);
      });
      formData.append("faultId", this.handle.faultId);
      formData.append("isEquipmentFault", this.handle.isEquipmentFault);
      formData.append("mn", this.handle.mn);
      formData.append("note", this.handle.note);
      formData.append("id", this.handle.id);
      formData.append("status", this.handle.status);
      formData.append("createTime", this.handle.createTime);
      formData.append("handleBy", this.handle.handleBy);
      formData.append("handleResult", this.handle.handleResult);
      this.uploading = true;
      console.log(this.handle);
      this.$api.PostHandle(formData).then((res) => {
        if (res.data.code == 0) {
          this.$message.success("异常处理成功");
          this.handle = {
            faultId: "3", //故障类型选中
            isEquipmentFault: "no", //异常类型
            mn: "",
            note: "", //描述
            id: "",
            status: 1, //状态
            createTime: "",
            handleBy: "", //当前用户id
            handleResult: "已处理",
          };
          this.break();
          this.visibles = false;
        } else {
          this.$message.error(res.data.errorMessage);
        }
      });
      // }
      // });

      // this.$nextTick(() => {
      //   this.handle = {
      //     faultId: "3", //故障类型选中
      //     isEquipmentFault: "no", //异常类型
      //     mn: "",
      //     note: "", //描述
      //   };
      // });
    },
    cancelBtn() {
      this.visibles = false;
      this.handle = {
        faultId: "3", //故障类型选中
        isEquipmentFault: "no", //异常类型
        mn: "",
        note: "", //描述
        id: "",
        status: 1, //状态
        createTime: "",
        handleBy: "", //当前用户id
        handleResult: "已处理",
      };
    },
    //异常处理下拉
    // handleChange(value) {
    //   console.log(`selected ${value}`);
    // },
    //上传
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    //模态框分页
    pagechangeFns(page, pageSize) {
      this.modalList.current = page;
      this.modalList.size = pageSize;
      this.break();
    },
    //首页列表分页
    pagechangeFn(page, pageSize) {
      this.data.current = page;
      this.data.size = pageSize;
      this.initializeRequest();
    },
    initializeRequest() {
      this.data.status = "";
      //列表请求
      this.$api
        .postEquipmentdatalatestData(this.data, this.formData)
        .then((res) => {
          // if (this.data.status == null) {
          //   console.log(res);
          //   this.total = res.data.total;
          // }
          this.dataType = res.data.data;
          this.total = res.data.total;
          console.log(this.statusCount);
        });
    },
    onChange() {},
    onSelect() {},
    onSelectAll() {},
  },
  mounted() {
    this.initializeRequest();
  },
};
</script>
<style scoped>
::v-deep .ant-form-item-control {
  margin-left: 10px;
}
.modalTop {
  border: 1px solid #207064;
  height: 200px;
  display: flex;
  flex-flow: row nowrap;
}
.imgPro {
  width: 10%;
  margin: 20px 20px;
}
.imgPro > img {
  width: 100%;
  vertical-align: middle;
}
.modalLeft {
  width: 90%;
  margin: 20px 10px;
}

.block-text {
  margin: 20px 0;
  color: #9fb043;
  font-size: 18px;
  width: 33.33%;
}
.block-text > :first-child {
  width: 100px;
}
.block-text > span:last-child {
  margin-left: 30px;
  color: #bebebe;
}
.modalRight {
  width: 60%;
}
.modalRight > #historyDataId {
  width: 100%;
  height: 100%;
}

.modal > .page-box1 {
  float: right;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.modalFooter {
  width: 100%;
  height: 750px;
}
.del-btn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}

/* .modalFooter > .tableclass{
  width: 90%;
} */
.ant-input[disabled] {
  color: rgba(255, 255, 255, 0.6);
  background-color: #2c4945;
}
.DSL-exhandling {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-top {
  width: 100%;
  height: 15%;
}
.ul-class {
  width: 102%;
  height: 100%;
  background: url(../../../assets/public/监测.png) no-repeat;
  background-size: 100% 100%;
  padding: 2% 1%;
  box-sizing: border-box;
  display: flex;
  margin-left: -1%;
}
.li-class {
  width: 20%;
  height: 100%;
  border-left: 1px solid #37ddc0;
  padding: 0 2%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.li-class:first-child {
  border-left: 0;
}
.li-class > img {
  width: 60px;
}
.li-class .li-center__box .p1 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}
.li-class .li-center__box .p2 {
  font-size: 16px;
}
.li-class > span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 46px;
}

.content-center {
  width: 100%;
  height: 95%;

  overflow: hidden;
}
.content-center .list-box {
  margin-top: 8px;
  width: 23%;
  height: 20%;
  border: 1px solid #a4574a;
  border-radius: 6px;
  padding: 10px;
  margin-left: 25px;
  margin-bottom: 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  float: left;
}

.content-center .normal {
  border: 1px solid #89c953;
}

.content-center .list-box > img {
  width: 45%;
  height: 100%;
}
.list-box__right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.normal-right {
  justify-content: space-around;
}
.right-name > img {
  height: 24px;
  vertical-align: middle;
}
.right-name > span {
  color: rgba(255, 255, 255, 0.7);
  line-height: 20px;
  padding-left: 6px;
  vertical-align: middle;
}
.address-box {
  font-size: 14px;
  color: #207064;
}

.content-bottom1 {
  width: 100%;
}
.page-box {
  float: right;
  display: flex;
  align-items: center;
  margin-right: 22px;
}
.equipmentName {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  vertical-align: middle;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep .ant-table-tbody > tr > td:nth-child(2) {
  padding: 0px;
}
::v-deep .ant-table-thead > tr > th {
  border-bottom: 1px solid #207064;
}
::v-deep .ant-table-tbody > tr > td:first-child {
  border-left: 1px solid #207064;
}
::v-deep .ant-table-tbody > tr > td:last-child {
  border-right: 1px solid #207064;
}
::v-deep .ant-table-tbody > tr > td {
  border-bottom: 1px solid #207064;
}
/* 分页 */
.ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep.DSL-exhandling .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>
